refactor(typography): apply vanilla-extract #162

jiji-hoon96 · 2025-05-21T08:52:23Z

Changes

vanilla extract 적용
스토리북 옵션 추가

Visuals

Checklist

Have you written the functional specifications?
Have you written the test code?

Additional Discussion Points

- package 설정 수정

- module css 삭제 - vanilla-extract 변경된 코드 적용

- 메인 로직 수정

- 테스트랑 스토리북 코드 수정

changeset-bot · 2025-05-21T08:52:26Z

⚠️ No Changeset found

Latest commit: 91c4b87

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2025-05-21T08:52:29Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

codecov · 2025-05-21T08:53:24Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Files with missing lines	Coverage Δ
packages/typography/src/Typography.css.ts	`100.00% <100.00%> (ø)`
packages/typography/src/Typography.test.tsx	`100.00% <100.00%> (ø)`
packages/typography/src/Typography.tsx	`100.00% <100.00%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

noahluftyang · 2025-05-23T13:22:53Z

packages/typography/src/Typography.css.ts

+export const size = styleVariants(fontSize, (value) => ({
+  fontSize: `${value}px`,
+}));


오 callback으로 값 변환이 가능하구나!

noahluftyang · 2025-05-23T13:24:36Z

packages/typography/src/Typography.css.ts

+  lineHeight: value,
+}));
+
+export const typography = recipe({


얘는 recipe로 처리해야할 만큼 복잡한 스타일은 아니라고 생각하는데, recipe를 사용하지 않는 방향으로 작성해볼 수 있을까??

알겠어!
나는 recipe 를 복잡하지않아도, 가독성이 좋아서 사용하는편인데 어떤 상황일 때 과한건지 판단하기가 어렵네..

음.. 요건 기준을 한 번 맞춰봐도 좋겠네 ㅎㅎ 나는 라이브러리들은 가능하면 의존성이 없는 상태로 만들었으면 하는 바람이 있어!
이번 경우에도 recipe를 사용하지 않고 styleVariants를 사용해서 작성했을 때 구문을 이해하기 어려움이 없었기 때문에, 굳이 라이브러리를 사용해야할까 고민이 들었어 😄

오케 이해했오
수요일에 한번 이야기해볼까?
나도 생각해보면 라이브러리 의존성을 최대한 줄이는 게 적합하다고 생각해

noahluftyang · 2025-05-23T13:26:23Z

packages/typography/src/Typography.tsx

 export type LineHeight = keyof typeof lineHeightToken;

-export interface TypographyProps extends ComponentProps<'p'> {
+export interface TypographyProps extends Omit<ComponentProps<'p'>, 'color'> {
+  as?: ElementType;


as prop은 asChild랑 동일한 역할이라서 중복 기능의 구현으로 보이는데, 추가한 이유가 있을까?

as props 는 Typography 컴포넌트 자체가 특정 HTML 요소로 렌더링되도록 하고 싶을 때 사용해 h1, h2, span 등등?
asChild는 Typography 스타일을 기존의 다른 컴포넌트나 요소에 주입하거나, 불필요한 DOM 래퍼 없이 스타일을 적용하고 싶을 때 사용해.

https://sandroroth.com/blog/react-polymorphic-components/

https://www.radix-ui.com/primitives/docs/guides/composition

디자인 시스템 공부할 때 살펴본 문서인데, 약간의 차이때문에 구현을 통해 컴포넌트 자체의 활용도를 높일 수 있따 알고있어!
혹시 다른 의견있으면 말해줘도좋아!

이게 작성자는 구현 의도를 알 수 있지만, 디자인 시스템 사용자가 이런 의도를 구분할 수 있을까 걱정이 되는게 있어. 그래서 사용자에게 선택지를 많이 주기보다는 하나의 확실한 선택지만 제공하는 쪽이 낫지 않을까 생각해~

아! 이해했어.
사용하는 사람들이 "이 상황에서 어떤 것을 사용하는게 적합할까?" 라는 혼동을 최소한으로 하자는거지?
오케!! 다른 코드들의 패턴을 보니 asChild 를 활용해서 남겨둘게!
고마워!!!

packages/typography/src/Typography.tsx

- 코드 리뷰 반영 - recipe 제거 - typography.tsx 파일 리팩토링

- vanilla-extract dynamic 설치 - 코드 리뷰 반영

noahluftyang · 2025-05-24T06:10:45Z

packages/typography/src/Typography.tsx

 ) {
-  const Component = asChild ? Slot : 'p';
+  const Component = asChild ? Slot : as || 'p';
+  const dynamicStyles = color ? assignInlineVars({ [textColorVar]: color }) : {};


아주 사소한건데 color가 undefined일 때에도 빈 객체랑 동일한 결과물로 나오기 때문에 삼항연산자로 구분하지 않아도 괜찮을 것 같아 ㅎㅎ

오호 그렇구나
고마워!

- as props 삭제

- 삼항연산 제거

jiji-hoon96 added 4 commits May 21, 2025 15:56

refactor(typography): migrate to Vanilla Extract

101b5d5

- package 설정 수정

refactor(typography): migrate to Vanilla Extract

9e88a8e

- module css 삭제 - vanilla-extract 변경된 코드 적용

refactor(typography): migrate to Vanilla Extract

c514fb8

- 메인 로직 수정

refactor(typography): migrate to Vanilla Extract

cf8f815

- 테스트랑 스토리북 코드 수정

jiji-hoon96 requested review from noahluftyang, froggy1014, synuns, dev-hobin, leejiwonn and haedawn as code owners May 21, 2025 08:52

auto-assign bot assigned jiji-hoon96 May 21, 2025

noahluftyang reviewed May 23, 2025

View reviewed changes

jiji-hoon96 added 2 commits May 24, 2025 11:56

fix(typography): migrate to Vanilla Extract

31e6e03

- 코드 리뷰 반영 - recipe 제거 - typography.tsx 파일 리팩토링

fix(typography): migrate to Vanilla Extract

e886b8e

- vanilla-extract dynamic 설치 - 코드 리뷰 반영

noahluftyang reviewed May 24, 2025

View reviewed changes

jiji-hoon96 added 2 commits May 26, 2025 10:05

fix(typography): migrate to Vanilla Extract

753b02d

- as props 삭제

fix(typography): migrate to Vanilla Extract

91c4b87

- 삼항연산 제거

noahluftyang approved these changes May 26, 2025

View reviewed changes

jiji-hoon96 merged commit be41d5b into release/v1 Jun 1, 2025
4 checks passed

jiji-hoon96 deleted the refactor/typography-vanilla-extract branch June 1, 2025 13:57

refactor(typography): apply vanilla-extract #162

refactor(typography): apply vanilla-extract #162

Uh oh!

Conversation

jiji-hoon96 commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Visuals

Checklist

Additional Discussion Points

Uh oh!

changeset-bot bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented May 21, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

codecov bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jiji-hoon96 commented May 21, 2025 •

edited

Loading

changeset-bot bot commented May 21, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented May 21, 2025 •

edited

Loading